@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.device-switcher__container {
	display: flex;
	flex-direction: column;
	align-items: center;

	&--frame-bordered {
		background: transparent;
		text-align: center;
		overflow: visible;
		pointer-events: all;
	}
}

.device-switcher__header {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;

	.device-switcher__toolbar {
		margin-bottom: 13px;
	}
}

.device-switcher__frame {
	display: flex;
	flex: 1;
	width: 100%;
	overflow: hidden;
	transition: all 0.2s ease-out;
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	// Create a new stacking context to fix border-radius with overflow hidden issue on safari
	// See https://github.com/Automattic/wp-calypso/issues/71440
	isolation: isolate;

	.device-switcher__container--frame-bordered & {
		--device-switcher-border-radius: 40px; /* stylelint-disable-line scales/radii */
		--device-switcher-border-width: 10px;
		border: var(--device-switcher-border-width) solid var(--color-print);
		border-radius: var(--device-switcher-border-radius);

		@include break-small {
			box-sizing: border-box;

			.device-switcher__container--frame-shadow & {
				box-shadow:
					0 5px 15px rgb(0 0 0 / 7%),
					0 3px 10px rgb(0 0 0 / 4%);
			}
		}

		@include break-large {
			--device-switcher-border-radius: 20px; /* stylelint-disable-line scales/radii */
			margin-top: 0;

			.device-switcher__container--frame-shadow & {
				box-shadow:
					0 15px 20px rgb(0 0 0 / 4%),
					0 13px 10px rgb(0 0 0 / 3%),
					0 6px 6px rgb(0 0 0 / 2%);
			}
		}
	}

	.device-switcher__container--is-tablet & {
		max-width: 782px;
	}

	.device-switcher__container--is-phone & {
		--device-switcher-border-radius: 40px; /* stylelint-disable-line scales/radii */
		max-width: 480px;
		max-height: 844px;

		.device-switcher__container--frame-shadow & {
			box-shadow:
				0 76px 65px rgb(0 0 0 / 4%),
				0 50px 40px rgb(0 0 0 / 3%),
				0 30px 20px rgb(0 0 0 / 3%),
				0 15px 13px rgb(0 0 0 / 2%),
				0 6px 5px rgb(0 0 0 / 2%),
				0 2px 3px rgb(0 0 0 / 1%);
		}
	}

	.device-switcher__container--is-fullscreen & {
		max-height: 100vh;
		max-width: 100vw;
		border-width: 0;
		border-radius: 0;
	}
}
